<template>
<!--  TODO @Deprecated 下次更新删除! -->
  <div>
    <el-row>
      <el-select v-model="currentFirst" placeholder="请选择" size="small" value-key="id" @change="loadSecondData" style="width: 100px;margin: 0 20px 0 0;" disabled>
        <el-option v-for="item in relateList" :key="item.id" :value="item" :label="item.label"/>
      </el-select>
      <el-select
          v-model="currentSecond"
          placeholder="请选择客户"
          size="small"
          value-key="customerName"
          style="width: 200px"
          @change="secondChange"
          filterable>
        <el-option v-for="item in secondList" :key="item.id" :value="item.customerId" :label="item.customerName"/>
      </el-select>

      <el-select
          v-model="currentThird"
          placeholder="请选择订单号"
          size="small"
          value-key="customerName"
          style="margin: 0 10px;width: 200px"
          @change="thirdChange"
          filterable>
        <el-option v-for="item in thirdList" :key="item.orderSn" :value="item.orderSn" :label="'订单号:'+item.orderSn"/>
      </el-select>

      <el-input v-model="currentFourth" placeholder="市场类型(选填)" style="margin: 0 10px;width: 200px" clearable/>

    </el-row>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs, ref} from 'vue'
import {getRelateItems, getRelateDataList, getCustomerOrders, getOrderPage} from '/@/api/matter'
import {ElMessage} from 'element-plus'
import api from '/@/api/commonApi'
import Cookies from "js-cookie";

export default {
  name: 'ModuleRelateByMoney',
  props: {
    relateItems: {
      type: Array,
      default: []
    },
    selected: {   // 默认选中的
      type: Object,
      default: {
        code: null,   // 一级关联项数据code
        dataId: null // 二级关联项数据id
      }
    }
  },
  setup(props, context) {
    const orderTableRef = ref()
    const {relateItems, selected} = toRefs(props)
    const state = reactive({
      currentFirst: {}, // 拿整个对象
      currentSecond: '', //客户ID
      currentThird: '', //订单ID
      currentFourth:'', //XX项目市场 选填

      secondParams: {
        current: 1,
        size: 0,
        name: null
      },
      thirdParams: {
        current: 1,
        size: 999,
        name: null,
        memberId: null
      },
      orderList:[],
      relateList: [], // 一级可关联项列表
      secondList: [], // 二级对象列表
      thirdList: [],  // 三级对象列表 部分二级对象数据没有三级对象列表
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        selectSource: 1
      },
      orderStage: {   // 订单阶段
        '0': '待付款',
        '1': '待发货',
        '2': '已发货',
        '3': '已完成',
        '4': '已关闭',
        '5': '无效订单',
        '6': '待审批',
        '7': '已审批',
        '8': '待退款',
        '9': '待退货',
        '10': '已签收',
        '11': '重发补发',
        '12': '退货',
        '13': '退款',
        '14': '退货退款'
      }
    })

    const loadSecondData = (val) => {
        api.orderList({
          pageNum: 0,
          pageSize: 500,
          selectSource: 1
        }).then(res => {
          state.orderList = res.data.list.records
          state.secondList = []
          const map = new Map();
          //客户去重
          res.data.list.records.forEach(item =>{
            if(!map.has(item.customerId)){
              state.secondList.push(item)
              map.set(item.customerId,"id")
            }
          })
        })
    }
    //第二项变更时 初始化并写入第三项的数据
    const secondChange = (val) => {
      state.currentThird = ''
      state.thirdList = []
      state.orderList.forEach(item =>{
        if(item.customerId == state.currentSecond){
          state.thirdList.push(item)
        }
      })
    }
    //第三项修改时
    const thirdChange = (val) => {

    }
    const initData = () => {
      state.secondList = state.thirdList = []
      state.thirdParams = {
        current: 1,
        size: 999,
        name: null,
        memberId: null
      }
      state.secondParams = {
        current: 1,
        size: 999,
        name: null
      }
    }


    onMounted(() => {
      initData()
      getRelateItems().then(res => {
        state.relateList = res.data
        if (selected.value && selected.value.code) {
          for (let i = 0; i < state.relateList.length; i++) {
            let item = state.relateList[i]
            if (item.code == selected.value.code) {
              state.currentFirst = item
              loadSecondData(item)
              break
            }
          }
        }
      }).catch(e => console.log(e))
    })

    return {
      orderTableRef,
      ...toRefs(state),
      loadSecondData,
      secondChange,
      thirdChange,
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
